<!DOCTYPE html>
<!--suppress JSValidateTypes -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  v-clock解决闪烁问题-->
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>

        <div id="vue" v-clock>
            <div>{{info.name}}</div>
            <div>{{info.address.city}}</div>

            <a v-bind:href="info.url">kuangShengXue</a>
        </div>



        <!--导入JS文件-->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script>
            let vm=new Vue({
                el: '#vue',
                //data:属性 vm
                data(){
                    return{
                        //请求的返回参数格式必须和JSON字符串格式一样
                        info:{
                            name:null,
                            address:{
                                street:null,
                                city:null,
                                country:null
                            },
                            url:null
                        }
                    }
                },
                mounted(){//钩子函数 链式编程   es6新特性
                    axios.get('../data.json').then(response=>(this.info=response.data));
                }
            });
        </script>

</body>
</html>